<template><!-- 行业资讯 --><!-- 行业资讯 -->
  <div id="Information">
       <div class="banner" v-for="item in banners" :key="item">
           <img :src="item.banner" alt="" class="img">
           <p class="p">{{item.font}}</p>
       </div>
       <div class="information_center">
          <div class="menu">
            <span @click="btn(1)" :class="{ show: tab === 1 }">公司新闻</span>
            <span @click="btn(2)" :class="{ show: tab === 2 }">行业动态</span>
          </div>
          <div class="content">
               <span v-if="tab == 1" class="displays">
                   <div class="center_left">
                        <div v-for="item in boxs" :key="item" class="boxs">
                            <img :src="item.boximg" alt="" class="boximg">
                            <div class="boxs_right">
                                <p class="title">{{item.title}}</p>
                                <p class="contents">{{item.contents}}</p>
                                <div class="boxs_right_two">
                                   <p> {{item.left}}     </p>
                                   <p> {{item.right}}     </p>
                                </div>
                            </div>
                        </div>
                    </div><!--center_left 中间内容左边盒子 -->
                    <div class="center_right">
                           <div class="right_box" v-for="item in right_box" :key="item">
                               <img :src="item.blue" alt="" class="blue">
                               <p class="righttitle">{{item.righttitle}}</p>
                               <p class="clear"></p>
                               <img :src="item.rightimg" alt="" class="rightimg">
                           </div>
                    </div> <!--center_left 中间内容you边盒子 -->
              </span>
                <span v-if="tab == 2"  class="displays">
                      <div class="center_left">
                           <div class="lef">
                             121156165
                           </div>
                        <!-- <div v-for="item in two_boxs" :key="item" class="two_boxs">
                            
                        </div> -->
                    </div><!--center_left 中间内容左边盒子 -->
                     <div class="center_right">
                           <div class="right_box" v-for="item in right_box" :key="item">
                               <img :src="item.blue" alt="" class="blue">
                               <p class="righttitle">{{item.righttitle}}</p>
                               <p class="clear"></p>
                               <img :src="item.rightimg" alt="" class="rightimg">
                           </div>
                    </div> <!--center_left 中间内容you边盒子 -->
              </span>
          </div>
       </div>
  </div>
</template>
<script>
// @ is an alias to /src
// import Nav from '@/components/Nav.vue'
export default {
  components: {
    // Nav
  },
  data(){
   return{
       tab: 1,
     banners:[
       {banner:require("../../assets/home_bg1.jpg"),font:"资讯汇聚与分享 专注于新能源"}
     ],
     boxs:[
        {boximg:require("../../assets/home_bg1_img2.png"),title:"2021全球创新峰会",
        contents:"内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内内容内容内容内容内容内容内容内容内容内容内容内容",
        left:"阳光保险经纪",right:"2021-06-24"},
            {boximg:require("../../assets/home_bg1_img2.png"),title:"2021全球创新峰会",
        contents:"内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内内容内容内容",
        left:"阳光保险经纪",right:"2021-06-24"},
            {boximg:require("../../assets/home_bg1_img2.png"),title:"2021全球创新峰会",
        contents:"内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内内容内容内容",
        left:"阳光保险经纪",right:"2021-06-24"},
     ],
     right_box:[
       {blue:require("../../assets/blue.png"),righttitle:"端午放假通知",rightimg:require("../../assets/home_bg1_img4.png")},
       {blue:require("../../assets/blue.png"),righttitle:"端午放假通知",rightimg:require("../../assets/home_bg1_img4.png")},
     ]
   }
  },
  methods:{
    btn(key) {
          this.tab = key; //选项卡切换
        },
  }
}
</script>
<style lang="scss">
   #Information{
     background-color: #EEEEF0;

       .banner{
         position:relative;

         .img{
           width: 100%;
           height: 600px;
         }
         .p{
           width: 14%;
           font-size: 30px;
           text-align: left;
           color: #fff;
           position: absolute;
           top: 170px;
           left: 20%;
           line-height:50px;
         }
       }

    .information_center{
      width: 80%;
      margin: 0 auto;

        .menu {
          display: flex;
          justify-content: space-around;
          font-size: 20px;
          padding-top: 20px;
        }
        
        .menu span {
          color: #000;
          background-color: #fff;
          font-size: 20px;
          line-height: 24px;
          padding: 20px 302.8px;
          display: block;
          cursor: pointer; /* 鼠标经过变小手 */
          line-height: 40px;
        }
        .menu span:hover {
          background-color: #00BDDA;
          color: #fff;
          // font-size: 25px;
        }

        .content{
          .displays{
            margin:0 0;
            display: flex;
            justify-content: space-around;
           

            .center_left{
              width: 65%;
              margin-top: 30px;
              margin-bottom: 30px;
              margin-right:3% ;

              .boxs{
                 display: flex;
                 justify-content: space-around;
                 margin-top: 20px;
                 background-color: #fff;
                padding: 30px 10px;

                 .boximg{
                  width: 47%;
                  height: 250px;
               }
               .boxs_right{
             
                 width: 47%;
                 height: 200px;
                 text-align: left;

                 .title{
                    font-size: 23px;
                    color: #000;
                    padding: 10px 0;
                    border-bottom: 1px solid #EBEBEB;
                 }
                 .contents{
                    padding: 10px 0;
                    color: #676767;
                    line-height: 30px;
                 }
                 .boxs_right_two{
                   padding-top: 60px;
                   display: flex;
                   justify-content: space-around;
                   color: #999999;
                   font-size: 15px;
                 }
               }
              }
              
            }
            .center_right{
              width: 30%;
              padding: 30px 10px;

              .right_box{
                      overflow: hidden;
                      background-color: #fff;
                      padding: 30px 10px;
                      margin-top: 20px;
               .clear{
                 clear: both;
               }
                .blue{
                  float: left;
                  margin-left: 15%;
                  width: 2.5%;
                  height: 30px;
                }
                 .righttitle{
                   width: 80%;
                   text-align: left;
                   float: right;
                   color:#000;
                   font-size: 22px;

                 }
                 .rightimg{
                   width: 70%;
                   margin-top: 30px;
                 }
              }
            }
            .two_boxs{
              height: 200px;
              background-color: #fff;
              width: 60%;
            }
            .lef{
              background-color: #fff;
              height: 400px;
            }
        }
    }
     }
   } 
</style>
